<template>
  <view class="content">
    <view class="city-info">
      <view class="city">
        {{ city }}
      </view>
      <view class="prov">
        {{ province }}
      </view>
      <view class="time">
        {{ dayInfo }}
      </view>
      <image
        @click="goSearch"
        class="search-img"
        src="../../static/images/search.png"
        mode=""
      ></image>
    </view>

    <!-- 实时天气 -->
    <view class="center-box">
      <view class="now-title"> 今天 </view>
      <view class="now-info">
        <image
          :src="'../../static/images/weatherIcons/' + nowInfo.icon + '.png'"
          mode=""
        ></image>
        <view class="temp">
          <text>{{ nowInfo.temp }}</text>
          <text>℃</text>
          <text>{{ nowInfo.text }}</text>
        </view>
      </view>
    </view>

    <!-- 未来24小时天气 -->
    <view class="weather24">
      <view class="w-title"> 未来24小时天气 </view>
      <view class="ul">
        <view class="li" v-for="(item, index) in weather24" :key="index">
          <image
            :src="'../../static/images/weatherIcons/' + item.icon + '.png'"
            mode=""
          ></image>
          <text>{{ item.temp }}℃</text>
          <text>{{ item.fxTime.slice(11, 16) }}</text>
        </view>
      </view>
    </view>

    <!-- 未来7天天气 -->
    <view class="weather7">
      <view class="w-title"> 未来7天天气 </view>
      <view class="ul">
        <view class="li" v-for="(item, index) in weather7" :key="index">
          <image src="../../static/images/weatherIcons/100.png" mode=""></image>
          <text>{{ item.tempMin }}℃/{{ item.tempMax }}℃</text>
          <text>{{ item.fxDate.slice(5).replace("-", "/") }}</text>
        </view>
      </view>
    </view>


		<view class="chart-title">
			未来7天气温趋势
		</view>
    <view class="charts-box">
      <qiun-data-charts type="line" :chartData="chartData" />
    </view>
  </view>
</template>

<script>
import getTime from "../../utils/getTime.js";

export default {
  data() {
    return {
      location: "", //经纬度信息
      city: "", //当前城市信息
      province: "", //当前省份信息
      dayInfo: "", //日期信息
      nowInfo: null, //当前天气信息
      weather24: [], //24小时天气
      weather7: [], //7天内天气
      chartData: {
        categories: [],
        series: [
          {
            name: "最低温",
            data: [],
          },
          {
            name: "最高温",
            data: [],
          },
        ],
      },
    };
  },
  onLoad(payload) {
    this.dayInfo = getTime(); //获取当前时间
    if (JSON.stringify(payload) === "{}") {
      // this.getCity();
      uni.getLocation({
        //获取当前经纬度信息
        type: "wgs84",
        success: (res) => {
          this.location = res.longitude + "," + res.latitude; //赋值给data
          uni.request({
            //请求获取城市信息
            url: "https://geoapi.qweather.com/v2/city/lookup",
            data: {
              key: "9d11bbfa85df4e6cbbbc65720dd5afda",
              location: this.location,
            },
            success: ({ data: { location } }) => {
              this.city = location[0].adm2 + "市"; //保存城市信息
              this.province = location[0].adm1; //保存省份信息
              this.getNow();
              this.getDay7();
              this.getDay24();
            },
          });
        },
      });
    } else {
      uni.request({
        //请求获取城市信息
        url: "https://geoapi.qweather.com/v2/city/lookup",
        data: {
          key: "9d11bbfa85df4e6cbbbc65720dd5afda",
          location: payload.location,
        },
        success: ({ data: { location } }) => {
          this.city = location[0].adm2 + "市"; //保存城市信息
          this.province = location[0].adm1; //保存省份信息
          this.getNow(payload);
          this.getDay7(payload);
          this.getDay24(payload);
        },
      });
    }
  },
  methods: {
    // 获取七天信息
    getDay7(payload) {
      let loca = payload ? payload.location : this.location;
      uni.request({
        //获取7天气信息
        url: "https://devapi.qweather.com/v7/weather/7d",
        data: {
          key: "9d11bbfa85df4e6cbbbc65720dd5afda",
          location: loca,
        },
        success: ({ data: { daily } }) => {
          // console.log(daily);
          this.weather7 = daily;
          const mins = [];
          const maxs = [];
          const dates = [];
          for (let i of daily) {
            mins.push(i.tempMin);
            maxs.push(i.tempMax);
            dates.push(i.fxDate.slice(5).replace("-", "/"));
          }
          // console.log(dates);
					// console.log(mins);
					console.log(maxs);
          this.chartData.series[0].data = mins;
          this.chartData.series[1].data = maxs;
          this.chartData.categories = dates;
        },
      });
    },

    //获取实时天气
    getNow(payload) {
      const loca = payload ? payload.location : this.location;
      uni.request({
        //获取当前天气信息
        url: "https://devapi.qweather.com/v7/weather/now",
        data: {
          key: "9d11bbfa85df4e6cbbbc65720dd5afda",
          location: loca,
        },
        success: ({ data: { now } }) => {
          // console.log(now)
          this.nowInfo = now;
        },
      });
    },
    // 获取24小时内天气
    getDay24(payload) {
      const loca = payload ? payload.location : this.location;
      uni.request({
        //获取24小时天气信息
        url: "https://devapi.qweather.com/v7/weather/24h",
        data: {
          key: "9d11bbfa85df4e6cbbbc65720dd5afda",
          location: loca,
        },
        success: ({ data: { hourly } }) => {
          this.weather24 = hourly;
        },
      });
    },
    // 跳转去搜索页面
    goSearch() {
      uni.navigateTo({
        url: "../search/search",
      });
    },
  },
};
</script>

<style lang="less">
.content {
  .city-info {
    color: #fff;
    padding: 30rpx;
    position: relative;

    .city {
      font-size: 70rpx;
      line-height: 150rpx;
    }

    .prov {
      font-size: 50rpx;
      line-height: 100rpx;
    }

    .time {
      font-size: 35rpx;
      line-height: 100rpx;
    }

    .search-img {
      width: 60rpx;
      height: 60rpx;
      position: absolute;
      right: 40rpx;
      top: 85rpx;
    }
  }

  .center-box {
    color: #fff;

    .now-title {
      font-size: 60rpx;
      text-align: center;
    }

    .now-info {
      display: flex;
      justify-content: space-around;

      image {
        width: 200rpx;
        height: 200rpx;
      }

      .temp {
        position: relative;
        display: flex;
        flex-wrap: wrap;

        text {
          display: block;
        }

        text:nth-child(1) {
          font-size: 150rpx;
          text-align: center;
        }

        text:nth-child(2) {
          font-size: 40rpx;
          position: absolute;
          top: 10%;
          right: -30rpx;
        }

        text:nth-child(3) {
          width: 100%;
          text-align: center;
          font-size: 40rpx;
          position: absolute;
          bottom: -15rpx;
        }
      }
    }
  }

  .weather24 {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .w-title {
      padding: 30rpx;
      font-size: 30rpx;
      width: 700rpx;
    }

    .ul {
      width: 700rpx;
      background-color: rgba(255, 255, 255, 0.6);
      height: 180rpx;
      align-items: center;
      border-radius: 25rpx;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
      display: flex;
      overflow: auto;

      .li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 12rpx;

        image {
          width: 50rpx;
          height: 50rpx;
          display: block;
        }

        text:nth-child(2) {
          font-size: 30rpx;
          margin: 10rpx 0;
        }

        text:nth-child(3) {
          display: block;
          font-size: 30rpx;
        }
      }
    }

    .ul::-webkit-scrollbar {
      display: none;
    }
  }

  .weather7 {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .w-title {
      padding: 30rpx;
      font-size: 30rpx;
      width: 700rpx;
    }

    .ul {
      width: 700rpx;
      background-color: rgba(255, 255, 255, 0.6);
      height: 180rpx;
      align-items: center;
      border-radius: 25rpx;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.35);
      display: flex;
      overflow: auto;

      .li {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 12rpx;

        image {
          width: 50rpx;
          height: 50rpx;
          display: block;
        }

        text:nth-child(2) {
          font-size: 30rpx;
          margin: 10rpx 0;
        }

        text:nth-child(3) {
          display: block;
          font-size: 30rpx;
        }
      }
    }
  }

  .ul::-webkit-scrollbar {
    display: none;
  }
	.chart-title {
		padding: 30rpx;
      font-size: 30rpx;
      width: 700rpx;
			color: #fff;
	}
}
</style>